<template>
    <div class="main_con">
        <div style="text-align: left;">
            <H2>校历(非特殊标记周一到周五上课  周六周日休息)</H2>
            <el-divider></el-divider>
        </div>
 
        <el-calendar v-model="value">
            <div class="acc" slot="dateCell" slot-scope="{date, data}" @click="handDateclick(data)">
                {{ data.day.split('-').slice(1).join('-') }}
                <!-- <el-tag type="danger" v-if="isWeek(date)" > -->
                <el-tag type="success" v-if="scheduleData[data.day]!== undefined &&scheduleData[data.day].length<=3">
                     {{scheduleData[data.day]}}
                </el-tag>
                <el-tag type="danger" v-if="scheduleData[data.day]!== undefined &&scheduleData[data.day].length>3">
                     {{scheduleData[data.day]}}
                </el-tag>
               
            </div>
        </el-calendar>
         <!-- 日期编辑 -->
                <el-dialog title="课表编辑" :visible.sync="dialogTableVisible"
:before-close="handclose">
  <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
  
  <el-form-item label="时间: ">
    <el-input v-model="sizeForm.riqi"></el-input>
  </el-form-item>
  <el-form-item label="更改校历: ">
    <el-input v-model="sizeForm.content"></el-input>
  </el-form-item>
  <el-form-item size="large">
    <el-button type="primary" @click="onSubmit">确认更新</el-button>
    <el-button type="danger" @click="del">删除</el-button>
    <el-button @click="exit">取消</el-button>
    
  </el-form-item>
</el-form>
</el-dialog>
    </div>
</template>
 
<script>
export default {
    name: "PatrolSchedule",
    components: {},
    data() {
        return {
            scheduleData: {},
            sizeForm:{
            content:'',
            riqi:''},
            values: '',
            value: new Date(),
            dialogTableVisible: false,
            token:''
        }
    },
    mounted() {
      this.token=localStorage.getItem("token")
      this.$store.commit('isShow')
        this.request();
    },
    methods: {
        // 删除日历信息
        del(){
            this.axios.get("/delrili/"+this.sizeForm.riqi,{headers:{
              'token':this.token
            }}).then((res)=>{
              if(res.data.msg!="error"){
                console.log(res);
        // this.student()
        this.request()
        this.dialogTableVisible=false;
              }
              else{
                this.$message({
               showClose: true,
               message: '抱歉!你还未登录!',
               type: 'warning'
                });
                this.$router.push("/")
              }
        
      })
        },
        onSubmit(){
            if(this.sizeForm.content!=''){
                this.requests()
            }
            this.dialogTableVisible=false;
        },
        exit(){
        this.dialogTableVisible=false;
        this.sizeForm.content=''
        
      },
       requests(){
            this.axios.post("/insertriqi",this.sizeForm,{
              headers:{
              'token':this.token
            }}
            
        ).then((res)=>{
          if(res.data.msg!="error"){
                this.$message({
          showClose: true,
          message: '恭喜你，添加课表信息成功!',
          type: 'success'
        });
        this.dialogTableVisible=false;
        this.sizeForm.content=''
        this.request()
              }
              else{
                this.$message({
               showClose: true,
               message: '抱歉!你还未登录!',
               type: 'warning'
                });
                this.$router.push("/")
              }
                
          
      }).catch((err)=>{
        this.$message({
          showClose: true,
          message: '抱歉!添加课表信息失败!',
          type: 'warning'
        });
      })
      
        },
        handDateclick(value){
            this.sizeForm.riqi=value.day;
            this.sizeForm.content=this.scheduleData[value.day];
            // console.log(this.scheduleData[this.sizeForm.riqi]);
            this.dialogTableVisible = true;
        },
        getDay(date){
            return date.getDate()
        },
        isWeek(date){
            if(date.getDay()===6||date.getDay()===0){
                return true;
            }
        },
        async request(){
          
            await this.axios.get("/date",{headers:{
              'token':this.token
            }}).then((res)=>{
              if(res.data.msg!="error"){
                const result=res.data.data;
                this.scheduleData=result
              }
              else{
                this.$message({
               showClose: true,
               message: '抱歉!你还未登录!',
               type: 'warning'
                });
                this.$router.push("/")
              }
                
                
      })
      console.log(this.scheduleData);
        }
    },
};
</script>
<style lang="less" scoped>
/deep/ .el-calendar-day {
    box-sizing: border-box;
    padding: 5px;
    height: 80px;
}
.acc{
    width: 100%;
    height: 100%;
}
/deep/ .el-dialog{
  width: 30%;
}
/deep/ .el-form-item__label{
  font-size: 16px;
}
/deep/ .el-input--mini {
    font-size: 18px;
}
/deep/ .el-form-item__label {
    line-height: 24px;
}
</style>